﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>领取记录</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .header {
            position: relative;
            background: #333;
            color: #fff;
            padding: 20px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        .header__headimgurl {
            min-width: 60px;
            width: 60px;
            height: 60px;
            background: #eee;
            border-radius: 50%;
        }

        .header__info {
            -webkit-flex: 1;
            flex: 1;
            padding-left: 0px;
        }

        .header__nickname {
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .btn__box .weui-btn {
            margin-top: 0;
        }

        .mescroll {
            position: fixed;
            top: 0px;
            bottom: 0;
            height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
        }

        .container {
            height: 100%;
            width: 100%;
            position: fixed;
            text-align: center;
        }
    </style>


</head>

<body>
<div class="container">
    <div id="mescroll" class="mescroll">
        <div>
            <div id="tap">
                <div class="header">
                    <div class="header__info">
                        <div class="header__nickname">红包金额</div>
                    </div>
                    <div class="header__info">
                        <div class="header__nickname">领取状态</div>
                    </div>
                    <div class="header__info" style="margin-right: 21px;">
                        <div class="header__nickname">领取时间</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="openId" type="hidden" th:value="${openId}">
<input id="platform" type="hidden" th:value="${platform}">
</body>

</html>
<script>
    var openId = $('#openId').val();
    var platform = $('#platform').val();
    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            //auto:true,
            isLock: true,
            //callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: true,
            callback: upCallback, //上拉加载的回调
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "mescroll", //父布局的id (1.3.5版本支持传入dom元素)
                icon: "/image/notData.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            }
        }
    });

    //下拉刷新的回调
    function downCallback() {

    }
    var id = 0;
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        $.get("/luckyRecord", {
            'pageNum': page.num,
            'pageSize': /*page.size*/15,
            'openId': openId,
            'platform': platform
        }, function (data) {
            if(data.code=='200'){
                var curPageData = data.data.list; // 接口返回的当前页数据列表
                var totalPage = data.data.pages; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
                for (var i = 0; i < data.data.list.length; i++) {
                    id = id + 1;
                    var type = "";
                    if(data.data.list[i].luckyMoney==null||data.data.list[i].luckyMoney==''){
                        data.data.list[i].luckyMoney='待领取';
                        type='点我可以领取'
                    }
                    else if(data.data.list[i].luckyMoney!=null&&data.data.list[i].luckyMoney>=4){
                        data.data.list[i].luckyMoney="+"+data.data.list[i].luckyMoney;
                        type='已领取'
                    }
                    else if(data.data.list[i].luckyMoney!=null&&data.data.list[i].luckyMoney<4){
                        data.data.list[i].luckyMoney="+"+data.data.list[i].luckyMoney;
                        //type='已补偿'  暂时已自动不消耗积分
                        type='已领取'
                    }
                    var d=new Date(data.data.list[i].createTime);
                    $("#tap").append('<div class="header" id="test" onclick="func()">' +
                        '                    <div class="header__info">' +
                    '                            <div class="header__nickname" style="margin-right: 32px;">'+data.data.list[i].luckyMoney.replace("+","")+'元</div>' +
                        '                    </div>' +
                    '                            <div class="header__nickname" style="margin-right: 19px;">'+type+'</div>' +
                        '                    <div class="header__info">' +
                    '                            <div class="header__nickname">'+formatDate(d)+'</div>' +
                        '                    </div>' +
                        '                    <input id="sn" type="hidden" value="'+data.data.list[i].sn+'"/>' +
                        '                </div>')
                }
                mescroll.endByPage(curPageData.length, totalPage);
            }else{
                alert(data.msg)
            }
        })
    }
    function func() {
        var sn=$("#sn").val();
        window.location.href = 'https://h5.ele.me/hongbao/?from=singlemessage&isappinstalled=0#hardware_id=&is_lucky_group=True&lucky_number=0&track_id=&platform=0&sn=' + sn + '&theme_id=3779&device_id=&refer_user_id=595511266&code=16E7C9AC73B1FED470AED71A92C40284'
    }
    function formatDate(now) {
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        var date=now.getDate();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var second=now.getSeconds();
        return year+"-"+month+"-"+date+"\n"+hour+":"+minute;//+":"+second
    }
</script>


